<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>聊天窗口</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<!-- Styles -->
	<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>

	<div id="slbox" class="lt">
		<ul id="boblist"></ul>
	</div>

	<script src="jquery.js"></script>
	<script src="json.js"></script>
	<script>
		var index = 0;
		var timer = 2000;
		var maxLen = json.length - 1;
		var run = function(){
			if(index > maxLen){
				return false;
			}
			showHtml(json[index]);
			index++;
		};
		setInterval(function(){run();},timer);

		function showHtml(data){
			var cls = "bob animated fadeInRight";
			if(data.type == 2){
				cls = "bob bobr animated fadeInLeft";
			}
			var _h = '<li class="'+cls+'"><div class="pic"><img src="'+data.pic+'"></div><div class="txt">'+data.txt+'</div><span class="sj"><em></em></span></li>';
			$("#boblist").append(_h); 
			$("#slbox").animate({ scrollTop: 50000000 }, 800);
		}
	</script>

</body>
</html>